<template>
	<view class="content">
		<image class = "logo" src = "/static/logo.png"></image>
		<view class = "text-area">
			<text class = "title">{{title}}</text>
		</view>
		<view>
			<view >{{ number + 1}}</view>
			<view >{{ok ? 'YES' : 'NO' }} </view>
			<view >{{message.split('').reverse().join('')}}</view>
		</view>
		
		<button @click="handleClick('参数1')">按钮1</button>
		<button @click="handleClick(dynamicParam)">按钮2</button>
		<button @click="handleClick('参数A','参数B',$event)">按钮3</button>
		<button @click="(e) => handleButton('点击事件',e)">带事件对象</button>
		
		
		
		<view v-if ="!raining">今天天气真好</view>
		<view v-if = "raining">下雨天，只能在家呆着了</view>
		<view v-if ="state === 'vue'">state的值是Vue</view>
		<view>State is {{state?'vue':'APP'}} </view>
		<view>
			<view v-if = "state === 'vue'">uni-app</view>
			<view v-else-if = "state === 'html'">HTML</view>
			<view v-else>APP</view>
		</view>
		
		<view v-for = "item in arr" style = "color: #ff0000;">
			{{item}}
		</view>
		<view v-for = "(item,index) in 4" style="color: #00ff00;">
			<view :class = "'list-' + index%2">{{index%2}}</view>
		</view>
		<view v-for = "(value,name,index) in Object">
			{{index}}.{{name}}:{{value}}
		</view>
		<view v-for = "item in arr" :key = "item.id">
			<view style = "color : #0000ff;">
				{{item.id}}:{{item,name}}
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[
					{id:1,name:'uni-app'},
					{id:2,name:'HTML'}
				],
				object:{
					title: 'How to do lists in Vue',
					author:'Jane Doe',
					publishedAt:'2020-04-10'
				},
				
				raining : false,
				state:'vue',
				
				title:'Hello',
				number:1,
				ok:true,
				message:'Hello Vue!'
			}
		},
		methods: {
			handleClick(param1,param2,event){
				console.log("参数1:",param1)
				console.log("参数2:",param2)
				console.log("事件对象:",event)
			},
			handleButton(msg,event){
				console.log('接受的消息:',msg)
				console.log('事件对象:',event)
				console.log('按钮文本:',event.target.textContent)
			}
		}
	}
</script>

<style>
.content{
	text-align: center;
	padding: 200rpx;
}	

.logo{
	height: 200rpx;
	width: 200rpx;
	
}

.title{
	color: #888;
	font-size :50rpx;
	text-align: center;
	display: block;
}

</style>
